<template>
	<RouterView v-slot="{ Component }">
		<GConfigProvider
			:layoutHeaderConfig="{
				enableDefaultOperations: true,
			}"
		>
			<component :is="Component"></component>
		</GConfigProvider>
	</RouterView>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, ref, watch } from "vue";
import { GConfigProvider, http, useSettingStore, useWebsiteStore, useI18n } from "@gonsin/gview";
import { useRoute } from "vue-router";
import { useUserStore } from "./stores/user";
import { useTitle, useFavicon } from "@vueuse/core";
import { onMounted } from "vue";
import defaultFavicon from "@/assets/favicon.ico";

// const settingStore = useSettingStore();
const websiteStore = useWebsiteStore();
const settingStore = useSettingStore();

const keepAliveIncludeList = ref(new Set());
const include = computed(() => (Array.from(keepAliveIncludeList.value) as string[]) ?? []);
const route = useRoute();

async function handleGetLicense() {
	settingStore.setBasePermission([]);
	const res = await http.get("/license");
	if (res.state == 200) {
		// console.log("data", res.data);
		const data = res.data;

		if (data) {
			const extraString = data.extra;
			if (extraString) {
				const extraJson = JSON.parse(extraString);
				// console.log(extraJson);
				if (Array.isArray(extraJson) && extraJson.length) {
					const basePermission = extraJson.map((item) => item.name);
					settingStore.setBasePermission(basePermission);
				}
			}
		}
		return true;
	}

	return false;
}

onBeforeMount(async () => {
	// 检查授权
	const licenseRes = await handleGetLicense();
	if (licenseRes) {
		await initSetting();
	}
});

onMounted(() => {
	settingStore.loadLocalThemeConfig();
});

watch(
	() => route.path,
	() => {
		if (route.meta.keepAlive) {
			keepAliveIncludeList.value.add(route.name as string);
			// console.log(keepAliveIncludeList.value);
		}
	},
);

const { T, i18n } = useI18n();

const currentLocale = computed(() => i18n.global.locale.value);
const websiteSetting = computed(() => websiteStore.websiteSetting);
const websiteFavicon = computed(() => websiteStore.websiteFavicon);
const websiteTitle = computed(() => websiteStore.title);
const websiteTitleEn = computed(() => websiteStore.titleEn);
const isUserLogin = computed(() => settingStore.isUserLogin);

async function initSetting() {
	const res = await websiteStore.getWebsiteSetting();
	if (res) {
		changeTitleAndFavicon();
	}
}

function changeTitleAndFavicon() {
	if ((websiteTitle.value ?? "") !== "") {
		if (currentLocale.value.toLowerCase() === "zh-cn") {
			useTitle(websiteTitle.value);
		} else {
			useTitle(websiteTitleEn.value);
		}
	} else {
		useTitle(T.t("公信会务管理系统"));
	}

	if ((websiteFavicon.value ?? "") !== "") {
		useFavicon(websiteFavicon.value);
	} else useFavicon(defaultFavicon);
}

watch(
	() => websiteSetting.value,
	() => {
		changeTitleAndFavicon();
	},
	{ deep: true, immediate: true },
);

// watch(
// 	() => currentLocale.value,
// 	(value) => {
// 		changeTitleAndFavicon();
// 	},
// 	{ deep: true },
// );

watch(
	() => isUserLogin.value,
	async () => {
		await initSetting();
	},
	{ deep: true },
);
</script>

<style scoped></style>
